<template>
    <basic-container>
        <avue-crud :option="tableOption"
                   :data="treeList"
                   v-model="form"
                   @on-load="getList"
                   @row-update="update"
                   @row-del="deletes"
                   @row-save="create"
                   @refresh-change="handleRefreshChange"
                   :before-open="beforeOpen"
        >
            <template slot="icon" slot-scope="scope">
                <i :class="scope.row.icon" style="font-size:24px"></i>
            </template>
            <template slot="parentIdForm"
                      slot-scope="scope">
                <avue-input v-model="form.parentId"
                            type="tree"
                            placeholder="请选择所属父级"
                            :dic="treeResourcesData"
                            :props="defaultProps"></avue-input>
            </template>
        </avue-crud>
    </basic-container>
</template>

<script>
    import {tableOption} from '@/const/resources'
    import {listResources,saveResources,updateResources,deleteResources} from "@/api/resources";
    export default {
        name: "resources_index",
        data() {
            return {
                tableOption: tableOption,
                treeList: [],
                form:{},
                defaultProps: {
                    label: "name",
                    value: 'id'
                },
                treeResourcesData:[]
            }
        },
        methods: {
            getList() {
                listResources().then((response) => {
                    this.treeList = response.data.data
                })
            },
            beforeOpen(show, type){
                window.boxType = type;
                listResources().then((response) => {
                    this.treeResourcesData = response.data.data
                })
                show()
            },
            update(row, done,loading){
                updateResources(this.form).then(() => {
                    this.getList()
                    done();
                    this.$notify({
                        title: "成功",
                        message: "更新成功",
                        type: "success",
                        duration: 2000
                    });
                }).catch(() => {
                    loading();
                });
            },
            deletes(row){
                this.$confirm(
                    "此操作将永久删除该菜单(" + row.name + "), 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() =>{
                    deleteResources(row.id).then(() =>{
                        this.getList()
                        this.$notify({
                            title: "成功",
                            message: "删除成功",
                            type: "success",
                            duration: 2000
                        });
                    }) .cache(() => {
                        this.$notify({
                            title: "失败",
                            message: "删除失败",
                            type: "error",
                            duration: 2000
                        });
                    });
                })

            },
            create(row, done,loading){
                saveResources(this.form).then(() => {
                    this.getList()
                    done();
                    this.$notify({
                        title: "成功",
                        message: "创建成功",
                        type: "success",
                        duration: 2000
                    });
                }).catch(() => {
                    loading();
                });
            },
            handleRefreshChange() {
                this.getList()
            }
        }
    }
</script>

<style scoped>

</style>
